<template>
  <view class="page">
    <image
      :lazy-load="true"
      class="bg"
      :src="imgBaseUrlV2 + 'service-provider-detail-bg.png'"
      mode="widthFix"
    ></image>
    <view class="info" v-if="dataInfo">
      <view class="cover-view">
        <image
          :lazy-load="true"
          class="cover"
          :src="
            dataInfo.logo
              ? dataInfo.logo
              : imgBaseUrlV0 + 'temporary/service-provicer-cover.png'
          "
        ></image>
      </view>
      <view class="title"
        >{{ dataInfo.name }}
        <view class="tag"> 20年资质 </view>
      </view>
    </view>

    <view class="intro">
      <view class="title"> 服务商介绍 </view>
      <view class="desc" :class="{ noWrap: !isFold }">
        {{ dataInfo.description || "" }}
      </view>

      <view class="fold-box" @click="onToggleFold">
        <image
          :src="imgBaseUrlV2 + 'arrow.png'"
          mode="widthFix"
          class="fold"
          :class="{ active: isFold }"
        />
      </view>
    </view>

    <view class="service-info">
      <view class="hd">
        <view class="grade">
          {{ dataInfo.grade || 5 }}
        </view>
        <view class="name">服务评分</view>
      </view>

      <view class="bd">
        <view class="top">
          <Star :score="dataInfo.grade || 5"></Star>
          <text class="text">优质服务商</text>
        </view>

        <view class="desc" v-if="dataInfo.tags">
          <text
            class="tag"
            v-for="(tag, tagIndex) in dataInfo.tags"
            :key="tagIndex"
          >
            "{{ tag }}"
            <template v-if="tagIndex != dataInfo.tags.length - 1"
              >、</template
            ></text
          >
        </view>
      </view>
    </view>

    <view class="contact">
      <view class="address-view" @click="onOpenLocation(dataInfo)">
        <image
          :lazy-load="true"
          class="address-icon"
          :src="imgBaseUrlV2 + 'location.png'"
          mode="widthFix"
        ></image>
        <text class="address">{{ dataInfo.address }}</text> </view
      ><strong></strong>
      <view class="phone-view" @click="makePhoneCall(dataInfo.contact_mobile)">
        <image
          :lazy-load="true"
          class="phone-icon"
          :src="imgBaseUrlV2 + 'fuwushang_phone.png'"
          mode="widthFix"
        ></image>
        <text class="phone">{{ dataInfo.contact_mobile }}</text>
      </view>
    </view>

    <view class="polyfill"></view>

    <view class="page-title"> 服务项目 </view>
    <view class="service-projects">
      <view
        class="service-project"
        v-for="(serviceProject, index) in serviceProjects"
        :key="serviceProject.id"
        @click="openServiceProjectDetail(serviceProject)"
      >
        <view class="radio" @click.stop="onChecked(serviceProject, index)">
          <Radio :checked="serviceProject.checked"></Radio>
        </view>
        <image
          :lazy-load="true"
          class="cover"
          :src="
            serviceProject.logo
              ? serviceProject.logo
              : imgBaseUrlV0 + 'temporary/equipment.png'
          "
          mode="aspectFill"
        ></image>
        <view class="data-info">
          <text class="info-title">{{ serviceProject.title }}</text>
          <text class="sub-title">{{ serviceProject.brief }}</text>
        </view>
      </view>
    </view>

    <view class="fixed-bottom">
      <view class="btn" @click="onClickContact">联系客服</view>
      <view class="btn btn-primary" @click="onClickSubmit">立即维保</view>
    </view>

    <Message ref="message"></Message>
  </view>
</template>

<script>
import { getServiceProjects2 } from "@/common/api/service-project.js";
import detailModule from "@/common/mixins/detail-module";
import { imgBaseUrl, imgBaseUrlV0, imgBaseUrlV2 } from "@/common/config/index";
import Star from "@/components/public/star/star";
import Radio from "@/components/public/input/radio";
import { mapState } from "vuex";
import Router from "@/common/js/router";

export default {
  mixins: [detailModule],
  components: {
    Star,
    Radio,
    // uniRate,
  },
  computed: {
    ...mapState("User", ["userInfo"]),
  },
  data() {
    return {
      imgBaseUrlV0,
      imgBaseUrlV2,
      serviceProvider: null,
      serviceProjects: [],
      btnType: 0,
      isFold: false,
      mixinViewOptions: {
        getURL: "/service/detail",
        isPage: true,
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: false,
        pullDown: true,
      },
    };
  },
  onLoad(e) {
    if (e.id) {
      this.dataForm.id = e.id;
      this.getDataInfo();
      this.initData();
    }
    if (e.name) {
      let n = decodeURIComponent(e.name);
      this.dataForm.name = n;
      uni.setNavigationBarTitle({
        title: "服务商 - " + n,
      });
    }
  },
  methods: {
    fetchComplete(err, data) {
      if (!data.tags) {
        data.tags = ["响应时间快", "服务质量好", "维保技术高"];
      }
    },
    openServiceProjectDetail(e) {
      this.$Router.push({
        path: "/pages/service-project-detail/service-project-detail",
        query: {
          serviceId: this.dataInfo.id,
          id: e.id,
          serviceProjectId: e.id,
          // ...this.dataForm,
        },
      });
    },
    makePhoneCall(phone) {
      if (!phone) return;
      uni.makePhoneCall({
        phoneNumber: phone,
      });
    },
    onOpenLocation(location) {
      //       lat: 30.80513
      // lng: 103.922363
      console.log(location, "?locati22on");
      if (!location.lat || !location.lng) {
        return this.message.error("未获取到该地址经纬度");
      }
      console.log(location, "?location");
      uni.openLocation({
        latitude: location.lat,
        longitude: location.lng,
      });
    },
    onChecked(item, index) {
      this.serviceProjects.forEach((i) => (i.checked = false));
      let checked = item.checked;
      item.checked = !checked;
      console.log(item.checked, "??");
    },
    initData() {
      return this.getServiceProjects();
    },
    getServiceProjects() {
      getServiceProjects2({
        id: this.dataForm.id,
      }).then((res) => {
        let data = res.data || [];

        this.serviceProjects = data.map((i) => {
          return {
            ...i,
            checked: false,
          };
        });
      });
    },
    onToggleFold() {
      this.isFold = !this.isFold;
    },
    onClickContact() {
      Router.push({
        path: "/pages/contact/service",
        query: {
          ...this.dataInfo,
        },
      });
    },
    onClickSubmit() {
      let item = this.serviceProjects.find((i) => i.checked);
      if (item) {
        if (!this.userInfo.id) {
          uni.navigateTo({
            url: "/pages/login/index",
          });
        } else {
          this.$Router.push({
            path: "/pageA/service/apply/index",
            query: {
              serviceProjectId: item.id,
              servicer_id: this.dataInfo.id,
            },
          });
        }
      } else {
        this.message.error("请选择要维保的项目");
      }
    },
  },
  async onPullDownRefresh() {
    await this.initData();
    uni.stopPullDownRefresh();
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

.page {
  min-height: calc(100vh - var(--window-top));
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
  padding-bottom: 100rpx;
}

.bg {
  display: block;
  width: 100%;
}

.info {
  position: relative;
  display: flex;
  padding: 32rpx 0;
  margin: 0 24rpx;
  border-bottom: 1rpx solid #556372;

  .cover-view {
    flex: 0 0 auto;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 0;

    .cover {
      display: block;
      width: 56rpx;
      height: 56rpx;
    }
  }

  .title {
    position: relative;
    flex: 1;
    color: color-white;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    letter-spacing: 2rpx;
    margin-left: 20rpx;
    line-height: 56rpx;

    .tag {
      display: inline-block;
      line-height: 40rpx;
      height: 40rpx;
      background: linear-gradient(360deg, #eba800 0%, #ffc639 100%);
      border-radius: 4rpx;
      color: #fff;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      padding: 0 16rpx;
      margin-left: 20rpx;
    }
  }
}

.service-info {
  display: flex;
  margin: 0 24rpx;
  border-bottom: 1rpx solid #556372;
  padding: 18rpx 0;

  >.hd {
    flex: 0 0 auto;
    padding-bottom: 6rpx;

    >.grade {
      font-size: 48rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: bold;
      color: #F7BD3C;
      text-align: center;
      line-height: 48rpx;
      margin-bottom: 10rpx;
    }

    >.name {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #F7BD3C;
      line-height: 1;
    }
  }

  >.bd {
    flex: 1;
    margin-left: 36rpx;
    padding-top: 4rpx;

    >.top {
      display: flex;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #F7BD3C;
      margin-bottom: 5rpx;

      >.text {
        margin-left: 10rpx;
      }
    }

    >.desc {
      >.tag {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: color-white;
      }
    }
  }
}

.contact {
  padding: 24rpx;
}

.address-view {
  display: flex;
  margin-bottom: 12rpx;

  .address-icon {
    flex: 0 0 24rpx;
    width: 24rpx;
    vertical-align: middle;
    margin-top: 6rpx;
  }

  .address {
    padding-left: 20rpx;
    font-size: 26rpx;
    line-height: 38rpx;
    color: color-white;
  }
}

.phone-view {
  display: flex;

  // padding-left: 180rpx;
  .phone-icon {
    flex: 0 0 24rpx;
    width: 24rpx;
    margin-top: 6rpx;
    vertical-align: middle;
  }

  .phone {
    padding-left: 20rpx;
    font-size: 26rpx;
    line-height: 38rpx;
    color: color-white;
  }
}

.intro {
  position: relative;
  margin: 0 24rpx;
  padding-right: 50rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #556372;

  > .title {
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: bold;
    color:color-white;
    line-height: 56rpx;
    margin: 16rpx 0 8rpx;
  }

  >.desc {
    color: color-white;
    font-size: 24rpx;
    line-height: 1.6;

    &.noWrap {
      no-wrap();
    }
  }

  >.fold-box {
    extend-click();
    position: absolute;
    right: 0;
    top: 30rpx;
    padding: 12rpx;

    >.fold {
      width: 38rpx;
      height: 38rpx;
      transition: all 0.3s;

      &.active {
        transform: rotate(90deg);
      }
    }
  }
}

.service-projects {
  padding: 30rpx 30rpx 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .service-project {
    padding-bottom: 20rpx;
    // border-bottom: 3rpx solid #eee;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;

    > .radio {
      display: flex;
      align-items: center;
      padding-right: 20rpx;
    }

    &:last-child {
      margin-bottom: 0;
      border-bottom: 0;
    }

    .cover {
      width: 140rpx;
      height: 140rpx;
      border-radius: 8rpx;
    }

    .data-info {
      flex: 1;
      padding-left: 20rpx;

      .info-title {
        display: block;
        line-height: 60rpx;
        font-weight: 700;
        font-size: 28rpx;
        color: #FFFFFF;
      }

      .sub-title {
        display: block;
        line-height: 40rpx;
        font-size: 26rpx;
        color: #FFFFFF;
      }
    }
  }
}

.polyfill {
  height: 10rpx;
  background: #556372;
}

.fixed-bottom {
  position: fixed;
  z-index: 1500;
  display: flex;
  justify-content: space-around;
  width: 100%;
  min-height: 100rpx;
  left: 0;
  bottom: 0;
  padding: 10rpx 24rpx 0;
  box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.2);
  background: #163256;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  >.btn {
    flex: 0 0 48%;
    height: 80rpx;
    line-height: 76rpx;
    color: #3F7DFF;
	border-radius: 10rpx;
	border: 1px solid;
    &.btn-primary {
	  border : none;
      color: #fff;
    }
  }
}

.page-title {
  font-size: 36rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  color: color-white;
  padding: 0 24rpx;
  margin-top: 24rpx;
}
</style>